/*
* @Author: Josh
* @Date:   2019-08-17 18:09:58
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-27 14:34:00
*/

/* 弹出菜单,默认隐藏在屏幕下方 */
.ju-action-sheet > .ju-action-sheet-wrap {
    position  : fixed;
    right     : 0;
    bottom    : 0;
    left      : 0;
    max-width : 640px;
    margin    : auto;
    background: #eee;
    transition: transform .3s ease;
    transform : translateY(100%);
    z-index   : 301;
}
/* 菜单弹出 */
.ju-action-sheet.show .ju-action-sheet-wrap {
    transform: translateY(0);
}


/* 蒙版 */
/*
    蒙版需一直挂载在dom树body节点下 
    通过opacity:0设置元素不可见
    pointer-events:none，取消模板默认点击效果，让下方组件可以透过蒙版被点击;
*/
.ju-action-sheet > .ju-mask {
    opacity       : 0;
    pointer-events: none;
    transition    : opacity .3s ease;
}
/* 菜单弹出时蒙版 */
.ju-action-sheet.show > .ju-mask {
    opacity       : 1;
    pointer-events: auto;
}


/* 弹出菜单头部 */
.ju-action-sheet .ju-action-sheet-header {
    padding    : 0 2rem;
    display    : flex;
    align-items: center;
    text-align : center;
    height     : 3rem;
    background : #fff;
}
/* 弹出菜单头部标题 */
.ju-action-sheet .ju-action-sheet-header > .ju-action-sheet-title {
    flex              : 1;
    font-size         : .7rem;
    line-height       : 1rem;
    font-weight       : normal;
    color             : rgba(0,0,0,.3);
    overflow          : hidden;
    /*多行折行截断*/
    display           : -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


/* 菜单中间内容区 */
.ju-action-sheet .ju-action-sheet-body {
    border-top: 1px solid rgba(0,0,0,.1);
    background: #fff;
}
/* 菜单尾部，通常为取消按钮 */
.ju-action-sheet .ju-action-sheet-footer {
    margin-top: .3rem;
    background: #fff;
}
/* 每个菜单项 */
.ju-action-sheet .ju-action-sheet-menu {
    display    : block;
    height     : 2.8rem;
    line-height: 2.8rem;
    font-size  : .8rem;
    text-align : center;
}
/* 菜单项边框控制 */
.ju-action-sheet .ju-action-sheet-menu + .ju-action-sheet-menu {
    border-top: 1px solid rgba(0,0,0,.1);
}